import React, { Component } from 'react';

import './head.css';
import { Modal  } from 'antd-mobile';

class Head extends Component {

    constructor(props){
        super(props);

        this.state = {
            time:0,
            visible:true,
            query_text:'开启查询单词',
            query_text_state:true,
        };

    }


    timer(){
        let time = this.state.time;
        time++;
        this.setState({
            time:time++
        });
    }

    formatTimer(time){
        let hour = Math.floor((time / 3600) % 24);
        let minute = Math.floor((time / 60) % 60);
        let second = Math.floor(time % 60);
        if (second<10){
            second = '0'+second;
        }
        if(minute<10){
            minute = '0'+minute;
        }
        if(hour<10){
            hour = '0'+hour;
        }
        let newTime = hour+":"+minute+":"+second;
        return newTime;
    }

    componentDidMount(){

        if(this.props.title === undefined){
            this.timerId = setInterval(
                ()=>this.timer(),
                1000
            );
        }
       
    }

    componentWillMount(){
        clearInterval(this.timerId);
    }

    //返回
    comeBack(){

        if(this.props.url === undefined){
            this.props.history.goBack();
            return;
        }

        this.props.history.push(this.props.url);
        
        return;
    }

    switchQueryWord(){

        let state = this.state.query_text_state;

        this.props.query(state);

        if(state === true){

            this.setState({
                query_text:'关闭单词查询',
                query_text_state:false
            });

            return;
        }

        this.setState({
            query_text:'开启单词查询',
            query_text_state:true
        });
    }

    getTitleRender(){
        return (
            <div className="head-wrapper">
                    <i onClick={(e)=>{this.comeBack(e)}} style={{float:'left'}} className="icon iconfont icon-back_light"></i>
                    {this.props.title}
            </div>
        );
    }

    getTimeRender(){
        let time = this.formatTimer(this.state.time);
        
        return (
            <div className="head-wrapper">
                    <i onClick={(e)=>{this.comeBack(e)}} style={{float:'left'}} className="icon iconfont icon-back_light"></i>
                     {time}
                     <span onClick={(e)=>{this.props.submit(e)}} className="submit-page">交卷</span>
                    <i style={{float:'right'}} className="icon iconfont icon-apps" onClick={() => Modal.operation([
                        { text: this.state.query_text, onPress: () => this.switchQueryWord() },
                      ])} ></i>
            </div>
        );
    }


    render() {

        let content = ''

        if(this.props.title === undefined){
            content = this.getTimeRender();
        } else{
            content = this.getTitleRender();
        }

        return (
            
            <div className="question-head">
                {content}
            </div>
        );
    }
}

export default Head;